<template>
    <div>
        <el-row :gutter="30">
            <el-col :span="24">
                <el-button type="info" size="mini" icon="el-icon-refresh" @click="post_search()">刷新</el-button>
                <el-button type="success" size="mini" icon="el-icon-plus" @click="openAddForm()">添加</el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="postBatchDelete()" :disabled="this.multipleSelection.length ? false : true">删除</el-button>
            </el-col>
        </el-row>

        <el-row :gutter="24">
            <el-col :span="24">
                <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column label="序号" type="index" width="50"></el-table-column>
                    <el-table-column sortable prop="user" label="账号" width="120"></el-table-column>
                    <el-table-column sortable prop="user_name" label="名称" show-overflow-tooltip></el-table-column>
                    <el-table-column label="性别">
                        <template slot-scope="scope">
                            {{scope.row.sex==1 ? '男' : '女'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="phone" label="联系方式"></el-table-column>
                    <el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
                    <el-table-column sortable label="最后登陆日期" width="120">
                        <template slot-scope="scope">{{ scope.row.last_date }}</template>
                    </el-table-column>
                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button @click="openEditForm(scope.row)" type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
                            <el-button @click="post_delete(scope.row)" type="danger" size="mini" icon="el-icon-delete">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <el-dialog :title="this.popupTitle" :close-on-click-modal="false" :visible.sync="dialogFormVisible" @close="resetForm('form')">
            <el-form :model="form" ref="form" :rules="rules">
                <el-form-item :label-position="labelPosition" label="账号" prop="user" :label-width="formLabelWidth">
                    <el-input v-model="form.user" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item :label-position="labelPosition" label="名称" prop="user_name" :label-width="formLabelWidth">
                    <el-input v-model="form.user_name" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item :label-position="labelPosition" label="联系方式" prop="phone" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item :label-position="labelPosition" label="邮箱" prop="email" :label-width="formLabelWidth">
                    <el-input v-model="form.email" type="email" clearable></el-input>
                </el-form-item>
                <el-form-item :label-position="labelPosition" prop="sex" label="性别" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.sex">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('form')">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import validator, { validatePhone, isPassword, validatePhoneTwo } from '../../assets/js/validator'
    import { Loading } from 'element-ui'

    export default {
        // name: 'HelloWorld',
        data () {
            // 密码确认
            var confirmPassWord = (rule, value, callback) => {
                if (value !== this.form.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                data: [],
                action: 'search',
                dbName: 'user',
                multipleSelection: [],
                dialogFormVisible: false,
                popupTitle: '添加用户',
                form:{
                    user_id: '',
                    user: '',
                    user_name: '',
                    password: '',
                    confirmPassWord:'',
                    email: '',
                    sex: '1',
                    phone: '',
                    last_date: ''
                },
                loading: true,
                rules:{
                    user: [
                        { required: true, message:'账号不能为空', trigger: 'blur'}
                    ],
                    user_name: [
                        { required: true, message:'名称不能为空', trigger: 'blur'}
                    ],
                    password: [
                        { required: true, message: '密码不能为空', trigger: 'blur' },
                        { type: 'string', min: 6, max: 17, message:'密码不允许小于6位大于17位'},
                        { validator: isPassword}
                    ],
                    email: [
                        { required: true, message: '请填写邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请填写正确的邮箱地址', trigger: ['blur', 'change'] }
                    ],
                    phone: [
                        { required: true, message: '请填写联系方式', trigger: 'blur' },
                        { validator: validatePhoneTwo}
                    ],
                },
                formLabelWidth:'120px',
                labelPosition: 'right',
            }
        },
        components:{},
        mounted() {
            // 查询
            this.post_search();

            // 删除
            // this.post_delete()
        },
        methods:{   
            // 初始化弹窗
            openFullScreen(){
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
            },
            // 查询
            post_search(){
                Loading.service({ fullscreen: true ,spinner: 'el-icon-loading',text: 'Loading',lock: true});
                this.$axios.post("/user/getList").then((result) => {
                    console.log(result);
                    Loading.service({ fullscreen: true }).close();
                    this.data = result.data;
                }).catch((err) => {
                    console.log(err);
                });
            },
            // 插入
            post_insert(){
                this.action = "insert";
                this.$post("user.php",this.data);
            },
            // 删除
            post_delete(data){
                this.$confirm('确认删除？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.delete("/user/delDate",{data:data}).then((result) => {
                        console.log(result);
                        this.data = result.data;
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch((err) => {
                        console.log(err);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            // 批量删除
            postBatchDelete(){
                this.$confirm('确认删除？').then(_=>{
                    Loading.service({ fullscreen: true ,spinner: 'el-icon-loading',text: 'Loading',lock: true});
                    this.action = "delete";
                    this.dbName = 'user';
                    this.$post("user.php",{
                        action: this.action,
                        dbName: this.dbName,
                        data: this.multipleSelection
                    }).then((result) => {
                        console.log(result);
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.post_search();
                        // Loading.service({ fullscreen: true }).close();
                    }).catch((err) => {
                        console.log(err);
                    });
                }).catch(_=>{
                    console.log("取消")
                })
            },
            // 更新
            post_upData(){
                this.data.action = "upData";
                this.$post("user.php",this.data);
            },
            // 多选
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(val);
            },
            // 关闭按钮
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.dialogFormVisible = false;
            },
            // 修改弹窗
            openEditForm(data){
                this.action = 'upData';
                this.popupTitle = '修改用户';
                this.dialogFormVisible=true;
                this.form = JSON.parse(JSON.stringify(data));
            },
            // 添加弹窗
            openAddForm(){
                this.action = 'insert';
                this.popupTitle = '添加用户';
                this.dialogFormVisible=true;
                this.form = {sex: '1'};
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.dialogFormVisible = false;
                        this.$post("index.php", {
                            action: this.action,
                            dbName: this.dbName,
                            data:JSON.parse(JSON.stringify(this.form))
                        }).then((response)=> {
                            console.log(response);
                            this.$message({
                                message: this.popupTitle+'成功',
                                type: 'success'
                            });
                            this.post_search();
                        }).catch((error)=> {
                                console.log(error);
                            });
                    } else {
                        console.log('提交不了');
                        return false;
                    }
                });
            },
        }
    }
</script>